<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="http://www.ruohao.com.cn/textTransfer/mainFunc/browser.js"></script>
	<title>文案提取转化</title>

	<style>
		:root {
			--theme-color: #2196F3;
			--theme-color-dark: #1976D2;
		}

		body {
			font-family: Arial, sans-serif;
			background-color: #f4f4f9;
			color: #333;
		}

		.m-b-6 {
			margin-bottom: 6px;
		}

		h3 {
			background-color: var(--theme-color);
			color: white;
			padding: 10px 20px;
			border-radius: 5px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			margin: 10px 0;
		}

		textarea {
			width: 100%;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			resize: none;
			box-sizing: border-box;
		}
		textarea+textarea {
			margin-left: 2%;
		}

		button {
			background-color: var(--theme-color);
			color: white;
			border: none;
			cursor: pointer;
			margin-right: 4px;
			border-radius: 5px;
			padding: 6px 11px;
		}

		button:hover {
			background-color: var(--theme-color-dark);
		}

		input[type="text"],
		input[type="number"] {
			padding: 8px;
			border: 1px solid #ccc;
			border-radius: 4px;
			width: 220px;
			box-sizing: border-box;
		}

		select {
			padding: 8px;
			border-radius: 4px;
			width: 100%;
		}

		.flex-container {
			display: flex;
			justify-content: space-between;
		}

		.flex-container>div {
			flex: 1;
			margin-right: 30px;
		}

		.flex-container>div:last-child {
			margin-right: 0;
		}

		.flex-container-column {
			display: flex;
			flex-direction: column;
		}

		#replacedTextCount {
			font-weight: bold;
			color: red;
		}
		#pathQueryResult {
			width: 412px;
			height: 70px;
			background: #795548;
			border-radius: 8px;
			padding: 10px;
			color: #fff;
			display: inline-block;
			vertical-align: top;
		}
		.config-box {
			font-size: 13px;
		}
	</style>
</head>

<body>
	<div>
		<h3>
			文案提取转化（建议chrome访问）
			<div style="float: right;">
				替换文案数量统计: <span id="replacedTextCount">0</span>
			</div>
		</h3>
		<div class="flex-container m-b-6">
			<textarea id="textInput" rows="25" placeholder="请输入待转化的代码"></textarea>
			<textarea id="replaceResult" rows="25" disabled></textarea>
			<textarea id="extractBaseLang" rows="25" disabled></textarea>
		</div>
		<div class="m-b-6">
			<input id="path" type="text" value="common" placeholder="前置路径" onblur="textTransferSave()">
			<div style="display: inline-block;">
				<button onclick="textReplace()">文案转化</button>
				<button onclick="copyRes()">复制转化后文案</button>
				<button onclick="copyLang()">复制提取文案</button>
				<button id="testBtn" onclick="test()" style="display: none;">代码测试</button>
			</div>
		</div>
		<div class="flex-container-column m-b-6">
			<div class="m-b-6">
				<input id="pathQuery" type="text" placeholder="例: common.title">
				<button onclick="getResFromPath()">通过路径查询语言包文案</button>
			</div>
			<div>
				查询结果：
				<div id="pathQueryResult"></div>
			</div>
		</div>
		<div class="m-b-6">
			<h4 style="margin: 10px 0;">配置项</h4>
			<div class="flex-container config-box m-b-6">
				<div>
					提取后的key值如果为text开头的(默认时用key的),初始的后缀数值为
					<input id="textNumber" type="number" value="1" placeholder="提取出的文案的key的数字的起始值">，如填1，则为text1开始
				</div>
				<div>
					待转化的文件类型为
					<select id="fileType" onchange="textTransferSave()">
						<option value="vue">vue</option>
						<option value="js">js</option>
						<option value="vuejs">vuejs</option>
						<option value="vue-tem">纯template</option>
					</select>
				</div>
				<div>
					对于已经存在的文案，返回
					<select id="pathType" onchange="textTransferSave()">
						<option value="allPath">全路径</option>
						<option value="singlePath">单一路径</option>
					</select>
				</div>
				<div>
					<input type="checkbox" id="langRefer" onchange="textTransferSave()">
					<label for="langRefer">每次转换是否需要参考前面提取的文案（页面刷新不保留，勾选的话前面每次的都会算上）</label>
				</div>
			</div>
		</div>
	</div>

	<script>
		const getSettingData = () => {
			return {
				path: {
					value: document.getElementById('path').value || '',
				},
				fileType: {
					value: document.getElementById('fileType').value,
				},
				pathType: {
					value: document.getElementById('pathType').value,
				},
				langRefer: {
					attr: 'checked',
					value: document.getElementById('langRefer').checked
				}
			}
		}

		const textTransferGet = writeBack => {
			let textTransferData = localStorage.getItem('textTransfer') || '{}'
			textTransferData = JSON.parse(textTransferData)
			if (writeBack) {
				for (let key of Object.keys(textTransferData)) {
					const { attr = 'value', value } = textTransferData[key]
					if (value) document.getElementById(key)[attr] = value
				}
			}
			return textTransferData
		}

		// parcel打包会过滤没用到的函数，所以需要明确是挂载到window上
		window.textTransferSave = () => {
			localStorage.setItem('textTransfer', JSON.stringify(getSettingData()))
		}

		window.textReplace = () => {
			const textInputStr = document.getElementById('textInput').value || ''
			const textNum = document.getElementById('textNumber').value || 1
			const { path, fileType, pathType, langRefer } = getSettingData()
			const transfer = new textTransfer.Transfer(
				textInputStr,
				path.value,
				textNum,
				{
					fileType: fileType.value,
					isAllPath: pathType.value === 'allPath',
					langRefer: langRefer.value
				}
			)
			const [transferedData, langText] = transfer.main()
			document.getElementById('replacedTextCount').innerText = transfer.replaceTextCount || 0
			document.getElementById('replaceResult').value = transferedData
			document.getElementById('extractBaseLang').value = langText
			// 导出文件, 暂时没必要
			// exportFile(transferedData, document.getElementById('replaceResult'))
			// exportFile(langText, document.getElementById('extractBaseLang'))
			textTransferSave()
		}
		window.copyRes = () => {
			const textInputStr = document.getElementById('replaceResult').value || ''
			textTransfer.copy(textInputStr, 'textarea')
		}
		window.copyLang = () => {
			const textInputStr = document.getElementById('extractBaseLang').value || ''
			textTransfer.copy(textInputStr, 'textarea')
		}
		window.getResFromPath = () => {
			const pathQuery = document.getElementById('pathQuery').value
			const pathQueryResult = document.getElementById('pathQueryResult')
			const res = window.textTransfer.getObjValueFromPath(pathQuery) || ''
			pathQueryResult.innerText = res
		}
		window.test = () => {
			getFileContent('/textTransfer/mainFunc/test.vue', data => {
				if (!data) {
					nalert('获取测试代码失败')
					return
				}
				document.getElementById('textInput').value = data;
				textReplace()
			})
		}

		if (!location.port) document.getElementById('testBtn').style.display = 'inline-Block'
		document.getElementById('textInput').value = ''
		let textTransferData = textTransferGet(true)
		// 去重中文时会以这个数组的顺序去优先取值
		const path = document.getElementById('path').value || ''
		const moduleSort = ['common']
		let currModule = path ? path.split('.')[0] : ''
		currModule && moduleSort.unshift(currModule)
		window.moduleSort = moduleSort
	</script>
	<script type="module" src="./mainFunc/lang.js"></script>
	<script type="module" src="./mainFunc/transferClass.js"></script>
	<script type="module">
		import { getFileContent } from './mainFunc/baseFn.js'
		window.getFileContent = getFileContent
	</script>
</body>

</html>